import React from 'react';
import ReactDOM from 'react-dom';
import { WingBlank, Icon, WhiteSpace, Card ,Button ,Modal ,Toast} from 'antd-mobile';
import Header from './components/Header';
import { Setting } from './components/Setting';
import Translate from './components/Translate';
import moment from 'moment';

let styleDiv = {padding : '0 .3rem',fontSize : '0.28rem',position: 'relative'}
let styleCont = {color : '#888'}
let styleReview = { display: 'inline-block', paddingLeft: '.3rem', color: 'rgb(16,142,233)', paddingBottom: '10px' }
let styleReject = {display : 'inline-block',paddingLeft : '.3rem',color: 'rgb(255,142,0)',paddingBottom: '10px'}
let styleRuturn = {position : 'absolute',right : '.3rem'}
let styleButton ={border : 'none',lineHeight : '.28rem',height : '.28rem',fontSize : '.28rem'}
const App = React.createClass({
	getInitialState() {
	    return {
	    	loading: true,
	    	items: [],
	    	translate: {},
	    	id : ''
	    };
  	},
	fetchGet(){
		fetch( Setting.BaseUrl + 'enroll-list', {
	      credentials: 'include',
	      mode: 'cors',
	      method: 'get',
	    }).then(resp => resp.json()).then(resp => {
	    	this.setState({loading: false, items: resp.items, translate: resp.translate});
	    });
	},
  	componentDidMount() {
		this.fetchGet()
  	},
	handleClick(id,i) {
	  fetch( `${Setting.BaseUrl}revoke-enroll/${id}`, {
	      credentials: 'include',
	      mode: 'cors',
	      method: 'get',
	    }).then(resp => resp.json()).then(resp => {
	    	if (resp.success) {
	    		Toast.success('撤回成功', 1);
				this.fetchGet()
	    	}else{
	    		Toast.fail('撤回失败', 1);
	    	}
	    });
	},
  	formatDate(v) {
  		let m = moment(v, 'YYYY-MM-DD hh:mm:ss');
  		return m.isValid() ? m.format("YYYY-MM-DD") : '未指定';
	},
	  
	renderStatus(x) {
		if (x.status === 'approve') {
			return (<span style={styleReview}>已通过</span>);
		} else if (x.status === 'reject') {
			return (<span style={styleReview}>已拒绝</span>);
		} else if (x.status === 'pending') {
			return (<span style={styleReview}>审核中</span>);
		} else {
			return null;
		}
	},

	render() {
		const tr = new Translate(this.state.translate);
		const alert = Modal.alert;
		
		return (
		<div className="container" id="container">
			<Header title="报名信息" leftContent="" />
			{this.state.loading ? (
				<div style={{textAlign: 'center'}}>
					<Icon type="loading" size="lg" />
				</div>
        	) : null}
        	{ this.state.loading ? null : this.state.items.map((x, i) => (
        		<div key={i}>
				    <WhiteSpace size="lg" />
				    <Card full>
				      <Card.Header
						title={`${x.bkyxsmc} ${x.bkzymc} ${tr.getLabel('ksfsm', x.ksfsm)}`}
						extra={this.renderStatus(x)}
				      />
				      <Card.Body>
				        <div style={{paddingBottom: '10px'}}>专项计划：{tr.getLabel('zxjh', x.zxjh)}</div>
				        <div>举办时间：{this.formatDate(x.enroll.active_from)} 至 {this.formatDate(x.enroll.active_to)}</div>
				      </Card.Body>
				      {/*<Card.Footer content={x.created_at} extra={<div style={{color: '#108ee9'}}>审核中</div>} />*/}

				      <div style={styleDiv}>
				      	<span style={styleCont}>{x.created_at}</span>
						{x.status === 'pending' ? (
						<span style={styleRuturn}>
							{x.revocable ?
								<Button style={styleButton} onClick={() => alert('确定撤回吗?', '', [
									{ text: '取消', onPress: () => console.log('cancel') },
									{ text: '确定', onPress: (id) => this.handleClick(x.id, i), style: { fontWeight: 'bold' } },
								])}
								>撤回</Button>
								: null
							}
						</span>) : null}
				      </div>
				    </Card>
			  	</div>
        	))}
		</div>);
	}
})

ReactDOM.render(<App />, document.getElementById('example'));
